package com.dji.compose_learning.ui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringArrayResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.dji.compose_learning.R
import com.dji.compose_learning.ui.theme.Compose_learningTheme
import com.dji.compose_learning.utils.quantityResource

data class Elevations(val card: Dp = 0.dp)

val localElevations = compositionLocalOf { Elevations() }

object CardElevation {
    val height: Elevations
        get() = Elevations(10.dp)
    val middle: Elevations
        get() = Elevations(5.dp)
    val lower: Elevations
        get() = Elevations(2.dp)
}

val currentLocalColor = compositionLocalOf { Color.Yellow }
val currentStaticLocalColor = staticCompositionLocalOf { Color.Yellow }

var recomposeFlag = "init"

@Composable
fun CompositionLocalPage() {
    Column(modifier = Modifier
        .padding(16.dp)
        .verticalScroll(rememberScrollState())) {
        //sample 1
        Compose_learningTheme {  //这里使用不同的主题会引用不同主题中的颜色设置来渲染组件
            Surface(modifier = Modifier
                .fillMaxWidth()
                .height(100.dp),
                color = MaterialTheme.colorScheme.background) {
                CustomTextLabel(labelText = "Hello")
            }
        }
        MaterialTheme {  //实现主题、颜色切换非常的方便
            Surface(modifier = Modifier
                .fillMaxWidth()
                .height(100.dp),
                color = MaterialTheme.colorScheme.background) {
                CustomTextLabel(labelText = "Hello")
            }
        }

        //sample 2
        MaterialTheme {
            Column {
                Text(text = "This is a test Text locate here.")
                CompositionLocalProvider(LocalContentColor.provides(Color.Black.copy(alpha = 0.3f))) {
                    Text(text = "Are you ready to study this chapter?")
                }
                CompositionLocalProvider(values = arrayOf(
                    LocalContentColor.provides(Color.Black.copy(alpha = 0.7f)),
                    LocalTextStyle.provides(TextStyle(fontStyle = FontStyle.Italic))
                )) {
                    Text(text = "Ok,let's open the book at page 201.")
                }
                Text(text = "This verse is out of the CompositionLocalProvider.")
                CustomTextLabel(labelText = "This is the last line of this page.")
            }
        }

        //sample 3
        Spacer(modifier = Modifier.height(20.dp))
        Text(text = LocalContext.current.resources.getQuantityString(R.plurals.fruit_title, 0))
        Text(text = quantityResource(id = R.plurals.fruit_title, quantity = -1))
        Text(text = quantityResource(id = R.plurals.fruit_title, quantity = 2))
        Text(text = stringArrayResource(id = R.array.running_type)[0])
        ShowFruit(num = 1)

        //sample 4 自定义composition elevation
        Spacer(modifier = Modifier.height(20.dp))
        MyCard(modifier = Modifier
            .size(200.dp)
            .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f))
        ) {}
        Spacer(modifier = Modifier.height(10.dp))
        CompositionLocalProvider(values = arrayOf(localElevations.provides(CardElevation.middle))) {
            MyCard(modifier = Modifier
                .size(200.dp)
                .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f))) {}
        }

        //sample 5  StaticProvidableCompositionLocal
        val (bgColor, setbgColor) = remember {
            mutableStateOf(Color.Green)
        }

        Spacer(modifier = Modifier.height(20.dp))
        Row {
            //只有中间的boxdemo会重组
            Column {
                CompositionLocalProvider(LocalContentColor provides bgColor) {
                    BoxDemo(showText = "$recomposeFlag",
                        modifier = Modifier
                            .size(300.dp)
                            .background(Color.Red)) {
                        BoxDemo(showText = "$recomposeFlag",
                            modifier = Modifier
                                .size(200.dp)
                                .background(LocalContentColor.current)) {
                            BoxDemo(showText = "$recomposeFlag",
                                modifier = Modifier
                                    .size(100.dp)
                                    .background(Color.Yellow)){}
                        }
                    }
                }
                Button(onClick = {
                    //这里修改bgcolor的值
                    recomposeFlag = "reload"
                    setbgColor(Color.Blue)
                    //点击后3个box都重组了
                },
                    modifier = Modifier.align(Alignment.CenterHorizontally)) {
                    Text(text = "Change")
                }
            }

            //三个boxdemo都会重组
            Column {
                CompositionLocalProvider(currentStaticLocalColor provides bgColor) {
                    BoxDemo(showText = "$recomposeFlag",
                        modifier = Modifier
                            .size(300.dp)
                            .background(Color.Red)) {
                        BoxDemo(showText = "$recomposeFlag",
                            modifier = Modifier
                                .size(200.dp)
                                .background(currentStaticLocalColor.current)) {
                            BoxDemo(showText = "$recomposeFlag",
                                modifier = Modifier
                                    .size(100.dp)
                                    .background(Color.Yellow)){}
                        }
                    }
                }
                Button(onClick = {
                    //这里修改bgcolor的值
                    recomposeFlag = "reload"
                    setbgColor(Color.Blue)
                    //点击后3个box都重组了
                },
                    modifier = Modifier.align(Alignment.CenterHorizontally)) {
                    Text(text = "Change")
                }
            }
        }

    }
}

@Composable
fun BoxDemo(modifier: Modifier = Modifier, showText: String, content: @Composable () -> Unit) {
    Box(modifier = modifier,
        contentAlignment = Alignment.Center) {
        Column {
            Text(text = "$showText", color = Color.Black)
            content()
        }
    }
}

@Composable
fun CustomTextLabel(labelText: String) {
    Text(text = labelText, color = MaterialTheme.colorScheme.primary)
}

@Composable
fun ShowFruit(num: Int) {
    val resources = LocalContext.current.resources
    val fruitText = resources.getQuantityString(R.plurals.fruit_title, num)
    Text(text = "$num $fruitText")
}

@Composable
fun MyCard(
    modifier: Modifier = Modifier,
    elevalution: Dp = localElevations.current.card,
    content: @Composable BoxScope.() -> Unit,
) {
    Surface(modifier = modifier, shadowElevation = elevalution, shape = RoundedCornerShape(5.dp)) {
        Box(modifier = Modifier.fillMaxSize(), content = content)
    }
}














